import React, { Component } from "react";
import styles from "./address.module.scss";
import { Tag, Button } from "antd-mobile";
import { connect } from "react-redux";
import { withRouter,Redirect } from "react-router-dom";
import DistPicker from "react-distpicker";
import axios from "../../utils/myaxios";
import {
  changeInputNameAction,
  changeInputTelAction,
  changeDoorNumAction,
  handleSelectAction,
} from "../../store/actionCreator/addressAction";
class addAddress extends Component {
  state = {
    address: [{ city: "", district: "", province: "" }],
    addressNow: "",
    tag: [],
  };
  componentDidMount() {
    axios
      .get("/control/getTags")
      .then((res) => {
        // console.log(res);
        this.setState({
          tag: res.results,
        });
        // console.log(this.state.tag);
      })
      .catch((err) => {
        // console.log(err);
      });
  }
  render() {
    if (this.props.isAddress) {
      return (
        <Redirect to="/address"></Redirect>
                    
      )
    } else {
    return (
      <div>
        <div className={styles.addAddress}>
          <div className={styles.topNavLeft}>
            <svg
              className={styles.icon}
              aria-hidden="true"
              onClick={() => {
                this.props.history.push("/address");
              }}
            >
              <use href="#icon-zuojiantou"></use>
            </svg>
          </div>
          <div className={styles.topNavCenter} style={{ paddingRight: "40%" }}>
            新增地址
          </div>
        </div>

        <div className={styles.addressForm}>
          <p>
            <label htmlFor="name">姓名</label>
            <input
              type="text"
              id="name"
              placeholder="姓名"
              onChange={this.props.changeName.bind(this)}
              value={this.props.inputName}
            />
          </p>
          <p>
            <label htmlFor="tel">电话</label>
            <input
              type="text"
              id="tel"
              placeholder="Tel"
              onChange={this.props.changeInputTel.bind(this)}
              value={this.props.inputTel}
            />
          </p>
          <div className={styles.select1}>
            <label htmlFor="address">地址</label>
            {this.state.address[0].district ? (
              <input
                type="text"
                id="address"
                placeholder={this.state.addressNow}
              />
            ) : (
              <DistPicker
                placeholderProvince="省"
                placeholderCity="市"
                placeholderDistrict="区"
                pickerClass={styles.select}
                selectClass={styles.option}
                onSelect={(params) => {
                  this.setState({
                    address: [params],
                    addressNow: params.province + params.city + params.district,
                  });
                }}
              />
            )}
            <em
              onClick={() => {
                this.props.history.push("/map");
              }}
            >
              {">"}
            </em>
          </div>
          <p>
            <label htmlFor="doorNum">门牌号</label>
            <input
              type="text"
              id="doorNum"
              placeholder="例:5号楼203室"
              onChange={this.props.changeDoorNum.bind(this)}
              value={this.props.inputDoorNum}
            />
          </p>
          <div className={styles.p}>
            <label>标签</label>
            {this.state.tag.map((v) => {
              return (
                <Tag className={styles.tag1} key={v.tagID}
                style={{width:"60px"}}>{v.tagName}</Tag>
              );
            })}
          </div>
        </div>
        <div className={styles.save}>
          <Button
            onClick={this.props.handleSaveClick.bind(
              this,
              this.props.userInfo["0"].userID,
              this.props.inputName,
              this.props.inputTel1,
              this.state.address,
              this.props.inputDoorNum
            )}
            style={{ background: "#4DC060", color: "#fff" }}
          >
            保存
          </Button>
        </div>
      </div>
    );
  }
}
}
const mapStateToProps = (state) => {
  return {
    isLogin: state.userReducer.isLogin,
    isAddress:state.addressReducer.isAddress,
    userInfo: state.loginReducer.userInfo,
    inputName: state.addressReducer.inputName,
    inputTel1: state.addressReducer.inputTel1,
    inputDoorNum: state.addressReducer.inputDoorNum,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    changeName(e) {
      dispatch(changeInputNameAction(e.target.value));
    },
    changeInputTel(e) {
      dispatch(changeInputTelAction(e.target.value));
    },
    changeDoorNum(e) {
      dispatch(changeDoorNumAction(e.target.value));
    },
    handleSaveClick: function (
      userID,
      inpNameVal,
      inpTelVal,
      address,
      inpDoorNumVal
    ) {
      dispatch(
        handleSelectAction(
          userID,
          inpNameVal,
          inpTelVal,
          address,
          inpDoorNumVal
        )
      );
    },
  };
};

export default withRouter(
  connect(mapStateToProps, mapDispatchToProps)(addAddress)
);
